<!DOCTYPE html>
<html lang="zh">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8">
    <title>通讯录</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/txl.css">
</head>
<body>
    <div class="all">
        <div class="top flex sb">
            <div class="w33"></div>
            <div class="w33 tc">通讯录</div>
            <div class="w33 tr">
                <img src="images/icon_addfriend.png" />
            </div>
        </div>

        <div class="search_box">
            <div class="search_txt">
                <img src="images/icon_search.png" />
                <span>搜索</span></div>
        </div>

        <div class="chat_list">
            <div class="chat flex">
                <div class="pic">
                    <img src="images/gyy.jpg" />
                </div>
                <div class="txt">
                    <div class="line1 flex sb">
                        <div class="nickname">高圆圆</div>

                    </div>

                </div>
            </div>
            <div class="chat flex">
                <div class="pic">
                    <img src="images/gyy.jpg" />
                </div>
                <div class="txt">
                    <div class="line1 flex sb">
                        <div class="nickname">高圆圆</div>

                    </div>

                </div>
            </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div><div class="chat flex">
            <div class="pic">
                <img src="images/gyy.jpg" />
            </div>
            <div class="txt">
                <div class="line1 flex sb">
                    <div class="nickname">高圆圆</div>

                </div>

            </div>
        </div>

            <div class="chat flex">
                <div class="pic">
                    <img src="images/gyy.jpg" />
                </div>
                <div class="txt">
                    <div class="line1 flex sb">
                        <div class="nickname">高圆圆</div>

                    </div>

                </div>
            </div>


            <div class="chat flex">
                <div class="pic">
                    <img src="images/gyy.jpg" />
                </div>
                <div class="txt">
                    <div class="line1 flex sb">
                        <div class="nickname">高圆圆</div>

                    </div>

                </div>
            </div>

            <div class="chat flex">
                <div class="pic">
                    <img src="images/gyy.jpg" />
                </div>
                <div class="txt">
                    <div class="line1 flex sb">
                        <div class="nickname">高圆圆</div>

                    </div>

                </div>
            </div>

        </div>

        <div class="bnav flex">
            <div class="item w25"
                 onclick="javascript:location='index.html'">
                <img src="images/wx2.png" />
                <div >微信</div>
            </div>
            <div class="item w25"
                 onclick="javascript:location='txl.html'">
                <img src="images/txl2.png" />
                <div class="wechatcolor">通讯录</div>
            </div>
            <div class="item w25">
                <img src="images/fx.png" />
                <div>发现</div>
            </div>
            <div class="item w25">
                <img src="images/my.png" />
                <div>我</div>
            </div>
        </div>

        <div class="letters" id="letters">
            <div class="letter">A</div>
            <div class="letter">B</div>
            <div class="letter">C</div>
            <div class="letter">D</div>
            <div class="letter">E</div>
            <div class="letter">F</div>
            <div class="letter">G</div>
            <div class="letter">H</div>
            <div class="letter">I</div>
            <div class="letter">J</div>
            <div class="letter">K</div>
            <div class="letter">L</div>
            <div class="letter">M</div>
            <div class="letter">N</div>
            <div class="letter">A</div>
            <div class="letter">B</div>
            <div class="letter">C</div>
            <div class="letter">D</div>
            <div class="letter">E</div>
            <div class="letter">F</div>
            <div class="letter">G</div>
            <div class="letter">H</div>
            <div class="letter">I</div>
            <div class="letter">J</div>
            <div class="letter">K</div>
            <div class="letter">L</div>
            <div class="letter">M</div>
            <div class="letter">N</div>
        </div>
    </div>
</body>
</html>








